// 盘点详情列表
// 在已盘点的客户列表里点击查看详情进入
import * as React from 'react';
import { useEffect, useState } from 'react'
import { Button, Col, Row, Spin, Table } from 'antd';
import './index.scss';
import { http } from '@/lib';
import apis from '@/apis/Report';
const CheckedDetailList = (props) => {
    // const spanUI = {color: '#000', fontWeight: 'bolder'} as any;
    const spanUI = {} as any;
    const { state } = props.location;
    // console.log(state);
    // 返回上个界面，传递给HeaderTitle组件
    const backToDetail = () => {
        props.history.go(-1);
    }
    // table的pagination
    const [pagination, setPagination] = useState({
        page: 1, current: 1, pageSize: 10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'], total: 0,
        showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`
    })
    const [loading, setLoading] = useState(true);
    // table的datasouce
    const [dataSource, setDataSource] = useState<any>([])
    let pathnameStr = props.history.location.pathname.split('/');
    let id = pathnameStr[pathnameStr.length - 1];
    useEffect(() => {
        // !state && props.history.push('/quota/report/stockcustomercountreport/checkedcustomerlist')
        setLoading(true)
        http.get(apis.InventoryDetails + `?id=${id}&page=${pagination.page}&size=${pagination.pageSize}`)
            .then(res => {
                let data = res.data.content;
                data.forEach((item, index) => {
                    item.key = index;
                })
                setDataSource(data);
                setPagination({...pagination, total: res.data.totalElements});
                setLoading(false)
            })
            .catch(err => {
                // console.log(err);
                setLoading(false)
            })
        
    }, [pagination.page, pagination.pageSize]);
    useEffect(() => {
        sessionStorage.getItem('dealerName') || sessionStorage.setItem('dealerName', props.location.state.dealerName);
        return () => {sessionStorage.removeItem('dealerName');}
    }, [])
    // 未盘点客户列表列标题
    const columns = [
        {
            title: <span style={spanUI}>序号</span>,
            key: 'number',
            render: (text, record, index) => {
                return <span>{(pagination.current-1) * pagination.pageSize + index + 1}</span>
            }
        },
        {
            title: <span style={spanUI}>物料编码</span>,
            key: 'prodBarcode',
            dataIndex: 'prodBarcode'
        },
        {
            title: <span style={spanUI}>物料描述</span>,
            key: 'matName',
            dataIndex: 'matName'
        },
        {
            title: <span style={spanUI}>期初库存（含未到货）/件</span>,
            key: 'beginningRealStock',
            dataIndex: 'beginningRealStock',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={spanUI}>期间开单/件</span>,
            key: 'nowAog',
            dataIndex: 'nowAog',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={spanUI}>期末实物库存/件</span>,
            key: 'nowRealStock',
            dataIndex: 'nowRealStock',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={spanUI}>期末未到货/件</span>,
            key: 'onOrder',
            dataIndex: 'onOrder',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={spanUI}>期间动销数/件</span>,
            key: 'nowMove',
            dataIndex: 'nowMove',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={spanUI}>下月订单计划/件</span>,
            key: 'nextMonthOrderNum',
            dataIndex: 'nextMonthOrderNum',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={spanUI}>备注</span>,
            key: 'remark',
            dataIndex: 'remark',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
    ]
    
    return (
        <React.Fragment>
            <HeaderTitle backToDetail={backToDetail} customerName={sessionStorage.getItem('dealerName')}/>
            {/* 渲染的table */}
            <Spin spinning={loading}>
                <Table 
                    dataSource={dataSource}
                    columns={columns}
                    pagination={pagination}
                    onChange={(pageOptions) => {
                        setPagination({
                            ...pagination, pageSize: pageOptions.pageSize, current: pageOptions.current, page: pageOptions.current
                        })
                    }}
                />
            </Spin>
        </React.Fragment>
    )
}

function HeaderTitle(props){
    const { backToDetail, customerName } = props;
    return (
        <React.Fragment>
            <Row justify="space-around" align="bottom" gutter={24} style={{paddingTop: '10px'}}>
                <Col offset={0} span={22}>
                    <span className="hascheckedCustomerList-title">盘点详情列表</span>
                </Col>
                <Col offset={0} span={2}>
                    <Button onClick={() => {backToDetail()}} type="primary">返回</Button>
                </Col>
            </Row>
            <Row>
                <Col>
                    <div className="checkedCustomerList-title-customerName"><span>客户名称:</span>{customerName||'--'}</div>
                </Col>
            </Row>
        </React.Fragment>
    )
}

export default CheckedDetailList;